<template>
	<div class="role">
		<div class="title">
			<div class="sea">
				<div class="item">
					<el-form label-width="">
						<el-row :gutter="12">
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="测试组">
									<el-select v-model="group_id" clearable @change="search" style="width: 70%;" placeholder="请选择位置">
										<el-option
											v-for="(item,index) in groupOptions"
											:key="index"
											:label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="状态">
									<el-select v-model="status" clearable @change="search" style="width: 70%;" placeholder="请选择状态">
										<el-option
											v-for="(item,index) in statusList"
											:key="index"
											:label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="安卓版本">
									<el-select v-model="android_version" clearable @change="search" style="width: 70%;" placeholder="请选择责任人">
										<el-option
											v-for="(item,index) in android_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="ios版本">
									<el-select v-model="ios_version" clearable @change="search" style="width: 70%;" placeholder="请选择借用人">
										<el-option
											v-for="(item,index) in ios_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>

								</el-form-item>
							</el-col>

						</el-row>
					</el-form>
				</div>
				<div class="item">
					<el-row :gutter="10">
						<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
							<span>关键字:</span>
							<el-input v-model="keywords" clearable placeholder="请输入关键字: 任务名称/插件版本/固件版本/测试套件" style="width: 42%;" @change="search"></el-input>
							<el-button type="primary" @click="search">查询</el-button>
						</el-col>
					</el-row>
				</div>

			</div>
		</div>
		<div class="tab">
			<el-table
				v-if="initTableList"
				class="marT"
				:data="initTableList"
				:border="true"
				:header-cell-style="{background:'#eef1f6'}"
				lazy
				row-key="id">
				<el-table-column align="center" type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column align="center" property="task_name" label="任务名称" width="180"></el-table-column>
				<el-table-column align="center" property="task_type" label="任务类型" width="150">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.task_type == '预测试'" >预测试</el-tag>
						<el-tag v-if="scope.row.task_type == '首次提测'" type="success" >首次提测</el-tag>
						<el-tag v-if="scope.row.task_type == '复测'" type="warning" >复测</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" property="task_id" label="任务ID" width="180"></el-table-column>
				<el-table-column align="center"  label="任务进度" width="150">
					<el-table-column
						prop="case_statistic.Pass_count"
						align="center"
						label="Pass"
						width="60">
						<template slot-scope="scope">
							<span :style="scope.row.case_statistic.Pass_count>0?'color: #13ce66':'color:#ccc'">{{scope.row.case_statistic.Pass_count}}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="case_statistic.Fail_count"
						align="center"
						label="Fail"
						width="60">
						<template slot-scope="scope">
							<span :style="scope.row.case_statistic.Fail_count>0?'color: #f56c6c':'color:#ccc'">{{scope.row.case_statistic.Fail_count}}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="case_statistic.NA_count"
						align="center"
						label="NA"
						width="60">
						<template slot-scope="scope">
							<span :style="scope.row.case_statistic.NA_count>0?'color: #f56c6c':'color:#ccc'">{{scope.row.case_statistic.NA_count}}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="case_statistic.Skip_count"
						align="center"
						label="Skip"
						width="60">
						<template slot-scope="scope">
							<span :style="scope.row.case_statistic.Skip_count>0?'color: #f56c6c':'color:#ccc'">{{scope.row.case_statistic.Skip_count}}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="case_statistic.Block_count"
						align="center"
						label="Block"
						width="60">
						<template slot-scope="scope">
							<span :style="scope.row.case_statistic.Block_count>0?'color: #f56c6c':'color:#ccc'">{{scope.row.case_statistic.Block_count}}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="case_statistic.test_done_count"
						align="center"
						label="完成数"
						width="70">
					</el-table-column>
					<el-table-column
						prop="case_statistic.all_count"
						align="center"
						label="任务总数"
						width="80">
					</el-table-column>
				</el-table-column>
				<el-table-column align="center" property="status" label="测试状态" width="150">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 0" >{{scope.row.status_show}}</el-tag>
						<el-tag v-else-if="scope.row.status == 1" type="success" >{{scope.row.status_show}}</el-tag>
						<el-tag v-else-if="scope.row.status == 2" type="warning" >{{scope.row.status_show}}</el-tag>
						<el-tag v-else type="danger" >{{scope.row.status_show}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" property="group.name" label="测试组" width="150"></el-table-column>
				<el-table-column align="center" property="manpower" label="测试人员" width="150">
					<template slot-scope="scope">
						<span>{{getRole(scope.row.tester)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="manpower" label="人力需求" width="150"></el-table-column>
				<el-table-column align="center" property="android_version" label="Android版本" width="150"></el-table-column>
				<el-table-column align="center" property="ios_version" label="ios版本" width="150"></el-table-column>
				<el-table-column align="center" property="unit_version" label="插件版本" width="150"></el-table-column>
				<el-table-column align="center" property="firmware_version" label="固件版本" width="150"></el-table-column>
				<el-table-column align="center" property="test_suite_url" label="测试套件地址" width="150"></el-table-column>
				<el-table-column align="center" property="own" label="创建信息" width="200">
					<template slot-scope="scope">
						<span>{{getLeader(scope.row.creator_show)}}</span><br>
						<span style="font-size: 10px;">{{getTime(scope.row.create_time)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" fixed="right" width="180">
					<template slot-scope="scope">
						<span><a @click="see(scope.row.id)">查 看</a></span>
<!--						<span><a > | </a></span>-->
<!--						<span><a @click="edit(scope.row.id)">生成报告</a></span>-->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="tableSize"
				@size-change="tableSizeChange"
				@current-change="tableCurrentChange"
				:current-page="tableCurrent"
				style="text-align: center;height: 60px;"
				:total="tableTotal">
			</el-pagination>
		</div>
		<seeForm ref="seeForm"></seeForm>
	</div>
</template>

<script>
import seeForm from "./model/seeForm";
import { task, taskOptions, groupList } from '@/api/user'
export default {
	name: 'testTask',
	components:{
		seeForm
	},
	data(){
		return {
			size: 10,
			current: 1,
			total: 0,
			tableTotal: 1,
			tableSize:10,
			tableCurrent:1,
			status:'',
			initTableList: [],
			power:'',
			keywords:'',
			android_version:'',
			ios_version:'',
			group_id:'',
			groupOptions:[],
			statusList:[],
			android_list:[],
			ios_list:[],
			pending:false
		}
	},
	created() {
		this.pending = this.$route.query.pending
		this.initTable()
	},
	methods:{
		getRole(data){
			let name = ''
			data.filter((item,index) => {
				if(index < data.length-1){
					name += item['name'] + '，'
				}else {
					name += item['name']
				}
			})
			return name
		},
		search(){
			task({
				status:this.status,
				keywords:this.keywords,
				ios_version:this.ios_version,
				android_version:this.android_version,
				group_id:this.group_id
			}).then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}
			})
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			task({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}

			})
		},
		initTable(){
			this.android_list = []
			this.ios_list = []
			this.groupOptions = []
			this.statusList = []
			task({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize,
				pending:this.pending
			}).then(response => {
				if(response.status == 'success'){
					this.power = sessionStorage.getItem('power').split(',')
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}
			})
			taskOptions().then(res => {
				res.data.android_version.filter(item =>{
					this.android_list.push({name:item})
				})
				res.data.ios_version.filter(item => {
					this.ios_list.push({name:item})
				})
				this.statusList = res.data.status_list
				console.log(res,121212)
			})
			groupList().then(res => {
				this.groupOptions = res.data
			})
		},
		getLeader(data){
			if(data){
				return data['name']
			}
			else {
				return '暂无'
			}
		},
		getTime(data){
			if(data){
				var d = new Date(data);
				var d2 = d.getTime() - 8 * 60 * 60 * 1000
				d = new Date(d2)
				var  resDate = d.getFullYear() + '-' +
					((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
					(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
					(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
					(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
					(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());
				return resDate
			}else {
				return '暂无'
			}

		},
		getStatistic(data){
			let a = parseInt(data['all_count'])
			let b = parseInt(data['test_done_count'])
			let num = (b/a)*100
			return num.toFixed(2)+'%'
		},
		// edit(data){
		// 	this.$router.push(`/testingreport/${data}`)
		// },
		see(data){
			this.$router.push(`/detailTask/${data}`)
		}

	}
}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}

}
.title{
	width: 100%;
	padding: 20px;
	background-color: #fff;
	margin: 5px 0;
}
/deep/ .cell .el-tag {
	margin: 2px 0;
}
</style>
